<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<!-- <link href="../../../css/allApp.css" rel="stylesheet" /> -->
		<link href="./../css/css.css" rel="stylesheet" />
		<!--<script type="text/javascript" src="../chaxun/js/mui.js"></script>-->
		<style type="text/css">
			.mui-slider {
				background: #fff;
				/*margin-top: 6px;*/
			}
			
			.mui-control-item {
				color: #000!important;
				background: #fff;
			}
			
			.mui-segmented-control .mui-control-item.mui-active {
				color: #004D8C;
				background: #fff;
				border-bottom: 2px solid #004D8C;
			}
			
			.mui-bar-tab {
				z-index: 100;
			}
			.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
				top: 82px !important;
			}
			.mui-icon-search{
				color: #9A9A9A;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">待巡检</h1>
		</header>
		<div class="mui-content mui-scroll">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile" data-wid="dxjchild/syz_sub.html">
						<span>升压站巡检</span>
					</a>
					<a class="mui-control-item" href="#item2mobile" data-wid="dxjchild/sb_sub.html">
						<span>设备巡检</span>
					</a>
					<a class="mui-control-item" href="#item2mobile" data-wid="dxjchild/xl_sub.html">
						<span>线路巡检</span>
					</a>
				</div>

			</div>

		</div>
		<div class="mui-content">
			<div class="mui-card">

			</div>
		</div>

		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/jquery-1.7.2.min.js"></script>
		<script src="./../js/webviewGroup.js"></script>
		<script>
			mui.plusReady(function() {
				var _self = plus.webview.currentWebview();
				var group = new webviewGroup(_self.id, {
					items: [{
						id: "dxjchild/syz_sub.html",
						url: "dxjchild/syz_sub.html",
						extras: {}
					}, {
						id: "dxjchild/sb_sub.html",
						url: "dxjchild/sb_sub.html",
						extras: {}
					}, {
						id: "dxjchild/xl_sub.html",
						url: "dxjchild/xl_sub.html",
						extras: {}
					}],
					onChange: function(obj) {
						
						var c = document.querySelector(".mui-control-item.mui-active");						
						if(c) {
							c.classList.remove("mui-active");
						}
						var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
						target.classList.add("mui-active");
						if(target.scrollIntoView) {
							target.scrollIntoView();
						}
					}
				});
				mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
					var wid = this.getAttribute("data-wid");
					console.log('yemian+++' + wid);
					group.switchTab(wid);
				});
			});
			mui.back = function() {
				var _self = plus.webview.currentWebview();
				var page1 = plus.webview.getWebviewById('../jiankong/jiankong.html');
				mui.fire(page1, 'refresh');
				_self.close("auto");
			}
		</script>
	</body>

</html>